<template>
    <div class="container">
        <div class="handle-box">
            <span style="padding: 8px">预约人名称：</span>
            <el-input v-model="query.title" placeholder="预约人名称" class="handle-input mr10"></el-input>

            <span tyle="padding:8px;">预约状态：</span>
            <el-select v-model="query.status" @change="initAjaxMethod" placeholder="请选择">
                <el-option label="全部" :value="-3"></el-option>
                <el-option label="已取消" :value="-1"></el-option>
                <el-option label="已退回" :value="-2"></el-option>
                <el-option label="预约中" :value="0"></el-option>
                <el-option label="待核销" :value="1"></el-option>
                <el-option label="已核销" :value="2"></el-option>
                <el-option label="完成" :value="3"></el-option>
            </el-select>
            <span style="padding: 8px"></span>
            <el-button type="success" icon="el-icon-search" size="medium" @click="handleSearch">搜索</el-button>
            <el-button type="warning" size="medium" icon="el-icon-refresh-left" @click="resultClick()">重置</el-button>
        </div>
        <el-table
            :data="tableData"
            border
            ref="multipleTable"
            header-cell-class-name="table-header"
            @selection-change="handleSelectionChange"
        >
            <el-table-column type="selection" width="55" align="center"></el-table-column>
            <el-table-column label="序号" align="center" width="100" fixed>
                <template slot-scope="scope">{{ scope.$index + (query.pageIndex - 1) * query.pageSize + 1 }}</template>
            </el-table-column>
            <el-table-column label="申请人" align="center">
                <template slot-scope="scope">{{ scope.row.applicant_nickname }}</template>
            </el-table-column>
            <el-table-column label="申请人电话" align="center">
                <template slot-scope="scope">{{ scope.row.applicant_mobile }}</template>
            </el-table-column>
            <el-table-column label="约见人" align="center">
                <template slot-scope="scope">{{ scope.row.meet_nickname }}</template>
            </el-table-column>
            <el-table-column label="约见人电话" align="center">
                <template slot-scope="scope">{{ scope.row.meet_mobile }}</template>
            </el-table-column>
            <el-table-column label="申请人红娘" align="center">
                <template slot-scope="scope">{{ scope.row.meet_matchmaker_nickname }}</template>
            </el-table-column>
            <el-table-column label="申请人红娘电话" align="center">
                <template slot-scope="scope">{{ scope.row.meet_matchmaker_mobile }}</template>
            </el-table-column>
            <el-table-column label="约见人红娘" align="center">
                <template slot-scope="scope">{{ scope.row.applicant_matchmaker_nickname }}</template>
            </el-table-column>
            <el-table-column label="约见人红娘电话" align="center">
                <template slot-scope="scope">{{ scope.row.applicant_matchmaker_mobile }}</template>
            </el-table-column>
            <el-table-column label="红娘退回原因" align="center">
                <template slot-scope="scope">{{ scope.row.return_reason }}</template>
            </el-table-column>
            <el-table-column label="状态" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.status == -1">已取消</span>
                    <span v-if="scope.row.status == -2">已退回</span>
                    <span v-if="scope.row.status == 0">预约中</span>
                    <span v-if="scope.row.status == 1">待核销</span>
                    <span v-if="scope.row.status == 2">已核销</span>
                    <span v-if="scope.row.status == 3">完成</span>
                </template>
            </el-table-column>
            <el-table-column label="佣金状态" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.is_confirm == 1">已发放</span>
                    <span v-if="scope.row.is_confirm == 0">未发放</span>
                </template>
            </el-table-column>
            <el-table-column label="创建时间" align="center">
                <template slot-scope="scope">{{ scope.row.create_time | formDate }}</template>
            </el-table-column>
            <el-table-column label="操作" width="200" align="center">
                <template slot-scope="scope">
                    <el-button @click="checkBus(scope.row, scope.$index)" v-if="(scope.row.status == 3 || scope.row.status == 4) && scope.row.is_confirm != 1" type="text" size="small" icon="el-icon-edit"
                        >审核通过</el-button
                    >
                    <el-button
                        @click="refuseMethod(scope.row, scope.$index)"
                        v-if="scope.row.status == 2"
                        type="text"
                        size="small"
                        icon="el-icon-edit"
                        class="red"
                        >退回</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination
                background
                layout="total, prev, pager, next, jumper"
                :current-page="query.pageIndex"
                :page-size="query.pageSize"
                :total="pageTotal"
                @current-change="handlePageChange"
            ></el-pagination>
        </div>
        <el-dialog title="退回原因" :visible.sync="fTextModel" width="50%">
            <div class="list-group">
                <el-row :gutter="20">
                    <el-col :span="3">
                        <div class="list-title">退回原因:</div>
                    </el-col>
                    <el-col :span="21">
                        <el-input v-model.trim="admin_return_reason" placeholder="请输入" type="textarea" :rows="6"></el-input>
                    </el-col>
                </el-row>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button size="medium" @click="fTextModel = false">取 消</el-button>
                <el-button size="medium" type="primary" @click="saveEdit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import api from '@/api/index';
import { getdate } from '@/utils/utils';
export default {
    name: 'atchmakerReservation',
    data() {
        return {
            docLoadPath: api.IMG_PATH,
            exhibition_id: '',
            query: {
                pageIndex: 1,
                pageSize: 10,
                title: '',
                status: -3
            },
            zzTypeist: [],
            pageTotal: 0,
            tableData: [],
            fId: '',
            admin_return_reason: '',
            fTextModel: false
        };
    },
    filters: {
        toFixedFile: function (val) {
            if (!val) return '0.00';
            return Number(val).toFixed(2);
        },
        formDate: (val) => {
            if (!val) return '';
            return getdate(val);
        }
    },
    mounted() {
        this.initAjaxMethod();
    },

    methods: {
        //打回
        refuseMethod(data, index) {
            this.admin_return_reason = '';
            this.fTextModel = true; 
            this.fIndex = index;
            this.fId = data.id;
        },
        saveEdit() {
            if (!this.admin_return_reason || this.admin_return_reason == '') {
                this.$message.error('请填写退回原因');
            }
            const loading = this.$loading({ text: '加载中...' });
            this.$http
                .post(api.RESERVATION_RETUREN, { id: this.fId, admin_return_reason: this.admin_return_reason })
                .then((res) => {
                    loading.close();
                    console.log('项目列表', res);
                    if (res.code == 1) {
                        this.$message.success('成功');
                        this.tableData[this.fIndex].status = 1;
                        this.fTextModel = false;
                    } else {
                        this.$message.error(res.msg);
                    }
                })
                .catch((err) => {
                    this.$message.error(err.msg);
                });
        },
        //删除
        handleDelete(data) {
            this.delAjaxMethod(data.id);
        },
        //编辑
        createBus(row) {
            this.$router.push({ path: '/storedCardAdd', query: { id: row.id, type: 2 } });
        },
        resultClick() {
            this.query.title = '';
            this.query.status = -3;
            this.query.pageIndex = 1;
            this.initAjaxMethod();
        },
        createMethod() {
            this.$router.push({ path: '/storedCardAdd', query: { type: 1 } });
        },
        // 多选操作
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        delAllSelection() {
            let arr = [];
            if (this.multipleSelection.length <= 0) {
                this.$message({
                    type: 'error',
                    message: '请选择一个'
                });
                return false;
            } else {
                this.multipleSelection.forEach((item) => {
                    arr.push(item.id);
                });
                this.delAjaxMethod(arr.join(','));
            }
        },
        checkBus(row, index) {
            this.$confirm('是否继续此操作?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                const loading = this.$loading({ text: '加载中...' });
                this.$http
                    .post(api.RESERVATION_CHECK, { id: row.id })
                    .then((res) => {
                        loading.close();
                        if (res.code == 1) { 
                            this.tableData[index].is_confirm = 1; 
                            this.$message.success('审核成功');
                        } else {
                            this.$message.error(res.msg);
                        }
                    })
                    .catch((err) => {
                        this.$message.error(err.msg);
                    });
            });
        },
        // 分页导航
        handlePageChange(val) {
            this.$set(this.query, 'pageIndex', val);
            this.initAjaxMethod();
        },
        handleSearch() {
            this.$set(this.query, 'pageIndex', 1);
            this.initAjaxMethod();
        },
        initAjaxMethod() {
            let data = {
                pageIndex: this.query.pageIndex, //[string]	是	当前页
                pageSize: this.query.pageSize, //[string]	是	每页条数
                status: this.query.status, //[string]	是	付款名称
                title: this.query.title
            };
            this.$http
                .post(api.RESERVATION_INDEX, data)
                .then((res) => {
                    console.log('财务', res);
                    if (res.code == 1) {
                        this.tableData = Array.isArray(res.data.list) ? res.data.list : [];
                        this.pageTotal = res.data.total;
                    } else {
                        this.$message.error(res.msg);
                    }
                })
                .catch((err) => {
                    this.$message.error(err.msg);
                });
        }
    }
};
</script>

<style scoped>
.handle-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 20px;
}
.el-input--small {
    display: initial;
}
.handle-input {
    width: auto;
    display: inline-block;
}
.mr10 {
    margin-right: 10px;
}
.red {
    color: #f56c6c;
}
.green {
    color: #67c23a;
}
</style>